<template>
  <div class="page">
    <span class="back" @click="back">返回</span>
    <div ref="chartDiv" class="chartBox" id="chartBox"></div>
  </div>
</template>
<script>
import mapJsonMap from "@assets/map/citysHash.js"
import geoCoordMap from "@assets/map/geoCoordMap.js"
import { noRound } from "@/utils/index.js"

export default {
  name: "EmploymentIndustryFive",
  data() {
    return {
      options: {},
      mapName: "河南省",
      mapData: [],
      chartObj: null,
      isShow: ["河南省"],
      xAxisCategory: ["数据A", "数据B", "数据C"],
      inflationData: [100, 20, 10],
      mapStack: ["河南省"],
    }
  },
  mounted() {
    this.chartObj = this.$echarts.init(document.querySelector("#chartBox"))
    this.drawMap(this.mapName)
    // 响应式变化
    this.chartObj.on("click", this.mapClick)
    window.addEventListener("resize", () => this.chartObj.resize(), false)
  },
  methods: {
    mapClick(arg) {
      console.log("arg: ", arg)
      this.drawMap(arg.name)
      this.mapStack.push(arg.name)
    },
    back() {
      console.log("length: ", this.mapStack.length)
      if (this.mapStack.length > 1) {
        this.mapStack = this.mapStack.slice(0, this.mapStack.length - 1)
        this.drawMap(this.mapStack[this.mapStack.length - 1])
      }
    },
    async drawMap(mapName) {
      this.mapData = []
      console.log("======", mapName)
      const jsonData = require(`@/assets/henan/${mapName}.json`)
      this.$echarts.registerMap(this.mapName, jsonData)
      jsonData.features.forEach((item) => {
        // 地图数据
        this.mapData.push({
          name: item.properties.name,
          value: noRound(Math.random() * 118),
        })
      })
      this.optionFun()
    },
    optionFun() {
      let mytextStyle = {
          color: "#000", // 文字颜色
          fontStyle: "normal", // italic斜体  oblique倾斜
          fontWeight: "normal", // 文字粗细bold   bolder   lighter  100 | 200 | 300 | 400...
          fontFamily: "sans-serif", // 字体系列
          fontSize: 12, // 字体大小
        },
        options = {
          tooltip: {
            backgroundColor: "rgba(2,69,152, 0)",
            formatter: function (params) {
              return `<div style="border-style: solid;
              transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1);
              border-width: 0px;
              border-color: #333333;
              border-radius: 4px;
              color: #fff;
              font-style: normal;
              font-variant: normal;
              font-weight: normal;
              font-stretch: normal;
              font-size: 14px;
              font-family: 'Microsoft YaHei';
              line-height: 21px;
              margin: 0;
              padding: 20px 20px;
              opacity: 0.7;
              background: linear-gradient(white, white) left top, linear-gradient(white, white) left top, linear-gradient(white, white) right top, linear-gradient(white, white) right top,
                linear-gradient(white, white) left bottom, linear-gradient(white, white) left bottom, linear-gradient(white, white) right bottom, linear-gradient(white, white) right bottom;
              background-color: #024598;
              background-repeat: no-repeat;
              background-size: 1px 24px, 24px 1px;">${params.name}:${params.value} <br />
            </div>`
            },
          },
          visualMap: [
            {
              show: true,
              type: "continuous",
              min: 0,
              max: 100,
              seriesIndex: 0,
              right: 1,
              top: "bottom",
              calculable: true,
              itemWidth: 12,
              itemHeight: 100,
              inRange: {
                color: ["#e6f7ff", "#1890FF", "#0050b3"], // 渐变颜色
              },
              textStyle: {
                color: "#0091B0",
                fontSize: 12,
              },
            },
          ],
          // 设置地图立体效果
          geo: {
            id: "geoMap",
            map: this.mapName,
            roam: false,
            zoom: 1.2,
            label: {
              // 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
              normal: {
                show: false, // 是否在普通状态下显示标签。
                textStyle: mytextStyle, // 普通状态下的标签文本样式。
              },
            },
            itemStyle: {
              normal: {
                areaColor: "#fff", // 地图区域的颜色
                shadowColor: "#0050b3", // 阴影颜色
                borderWidth: 0, // 描边线宽。为 0 时无描边
                shadowOffsetX: -5, // 阴影水平方向上的偏移距离
                shadowOffsetY: 15, // 阴影垂直方向上的偏移距离
              },
            },
            emphasis: {
              label: {
                show: false,
              },
            },
            // 对不同区块进行着色
            // regions: this.buildRegions()
          },
          series: [
            {
              type: "map",
              map: this.mapName,
              zoom: 1.2,
              label: {
                show: true,
                color: "#fff",
                fontSize: 12,
                formatter: (params) => {
                  return "{a|" + params.name + "}\n{b|" + params.value + "}"
                },
                rich: {
                  a: {
                    fontSize: 12,
                    padding: [6, 0, 0, 0],
                  },
                  b: {
                    height: 16,
                    fontSize: 14,
                    padding: [0.5, 10, 4, 10],
                    backgroundColor: "#4976B0",
                    borderRadius: 12,
                  },
                },
              },
              itemStyle: {
                show: false,
                normal: {
                  borderColor: "#5AC3EB",
                  borderWidth: 1,
                  // areaColor: 'transparent'
                },
                emphasis: {
                  // areaColor: 'transparent'
                },
              },
              data: this.mapData,
            },
          ],
        }
      this.chartObj.setOption(options, true)
      this.renderEachCity()
    },
    renderEachCity() {
      let options = {
        xAxis: [],
        yAxis: [],
        grid: [],
        series: [],
      }
      this.$echarts.util.each(this.mapData, (dataItem, idx) => {
        let geoCoord = geoCoordMap[dataItem.name],
          coord = this.chartObj.convertToPixel({ geoId: "geoMap" }, geoCoord)
        idx += " "
        options.xAxis.push({
          id: idx + dataItem.name,
          gridId: idx + dataItem.name,
          type: "category",
          // name: dataItem.name,
          nameStyle: {
            color: "red",
            fontSize: 12,
          },
          nameLocation: "middle",
          nameGap: 3,
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          axisLine: {
            onZero: false,
            lineStyle: {
              color: "#666",
            },
          },
          data: this.xAxisCategory,
          z: 100,
        })
        options.yAxis.push({
          id: idx + dataItem.name,
          gridId: idx + dataItem.name,
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#1C70B6",
            },
          },
          z: 100,
        })
        options.grid.push({
          id: idx + dataItem.name,
          width: 30,
          height: 30,
          left: coord[0] - 15,
          top: coord[1] - 15,
          z: 100,
        })
        options.series.push({
          id: idx,
          type: "bar",
          xAxisId: idx + dataItem.name,
          yAxisId: idx + dataItem.name,
          barGap: 0,
          // barWidth: 15,
          z: 10,
          barCategoryGap: 0,
          data: this.inflationData,
          itemStyle: {
            normal: {
              // color: '#F75D5D'
              color: (params) => {
                // 柱状图每根柱子颜色
                let colorList = ["#F75D5D", "#59ED4F", "#4C91E7"]
                return colorList[params.dataIndex]
              },
            },
          },
        })
      })
      this.chartObj.setOption(options, false)
    },
    buildRegions() {
      const arr = []
      this.mapData.forEach((item) => {
        const color = this.buildColor(item.value)
        arr.push({
          name: item.name,
          itemStyle: {
            normal: {
              areaColor: color,
            },
            emphasis: {
              areaColor: color,
            },
          },
        })
      })
      return arr
    },
    buildColor(num) {
      let color = "rgba(0, 183, 240, 0.2)"
      if (num >= 0 && num < 20) {
        color = "rgba(0, 183, 240, 0.8)"
      } else if (num >= 20 && num < 40) {
        color = "rgba(18, 133, 242, 0.8)"
      } else if (num >= 40 && num < 60) {
        color = "rgba(14, 100, 192, 0.8)"
      } else if (num >= 60 && num < 80) {
        color = "rgba(17, 77, 165, 0.8)"
      } else if (num >= 80 && num < 100) {
        color = "rgba(11, 67, 152, 0.8)"
      } else {
        color = "rgba(8, 57, 133, 0.8)"
      }
      return color
    },
  },
}
</script>
<style lang="scss" scoped>
.back {
  cursor: pointer;
}
.chartBox {
  height: 100%;
}
</style>
